import React, { PureComponent, Fragment } from 'react';
import { connect, routerRedux } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';
import xxtx from '../../../../assets/busi/OperatePlatform/card_border_left.png'; // 左侧边框条
import xqtx from '../../../../assets/busi/OperatePlatform/xqtx.png'; // 行权提醒
import kzztx from '../../../../assets/busi/OperatePlatform/kzzsh.png'; // 可转债
import zqyc from '../../../../assets/busi/OperatePlatform/zqyctx.png'; // 债券异常
import xxtxheader from '../../../../assets/busi/OperatePlatform/title_bg.png'; // 笑嘻嘻提醒头部背景
import NoData from '../InfoWarn/component/NoData';
import style from './index.less';
import moment from 'moment';
@connect(({ BondAbnormalM, convertibleBondListM, ExerciseRemindM, userM: user, OperatePlatformM, loading }) => ({
  BondAbnormalM,
  convertibleBondListM,
  ExerciseRemindM,
  user,
  OperatePlatformM,
  //用于判断isLoading，需要根据工作台根据左侧菜单添加修改权限，
  isLoading: loading.effects['userM/getMenu'],
  xqtxLoading: loading.effects['ExerciseRemindM/getTableData'],
  kzzLoading: loading.effects['convertibleBondListM/getTableData'],
  zhsycLoading: loading.effects['BondAbnormalM/getTableData'],
  XQLoad: loading.effects['OperatePlatformM/storeSuper'],
  currentUser: user.currentUser || {},
}))
@Form.create()
export default class MessageRemind extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      xqtxNum: '--', // 行权提醒
      xptxNum: '--', // 信评提醒
      zzhtxNum: '--', // 可转债提醒
      zqyctxNum: '--', // 债券异常提醒
      tzggNum: '--', // 投资公告
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    let params;
    if (localStorage.getItem('antd-pro-superMan') == 'true') {
      dispatch({
        type: 'OperatePlatformM/storeSuper',
        payload: {},
        callback: (res) => {
          if (res) {
            params = {
              currentPage: 1,
              numInPage: 10,
              startDate: moment().format('YYYY-MM-DD'),
              endDate: moment().add(3, 'month').format('YYYY-MM-DD'),
              initType: 3,
              tenant: res.length ? res[0].value : '',
            };
            this.xqfn(params);
          }
        },
      });
    } else {
      params = {
        currentPage: 1,
        numInPage: 10,
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().add(3, 'month').format('YYYY-MM-DD'),
        initType: 3,
      };
      this.xqfn(params);
    }
    //可转债赎回提醒
    dispatch({
      type: 'convertibleBondListM/getTableData',
      payload: {
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().add(3, 'month').format('YYYY-MM-DD'),
        currentPage: 1,
        numInPage: 10,
      },
      callback: (res) => {
        if (res?.pageInfo) {
          this.setState({
            zzhtxNum: res?.pageInfo?.total || 0,
          });
        } else {
          this.setState({
            zzhtxNum: '--',
          });
        }
      },
    });
    //获取债券异常提醒
    dispatch({
      type: 'BondAbnormalM/getTableData',
      payload: {
        startDate: moment().format('YYYYMMDD'),
        endDate: moment().format('YYYYMMDD'),
        numInPage: 10,
        currentPage: 1,
      },
      callback: (res) => {
        if (res?.pageInfo) {
          this.setState({
            zqyctxNum: res?.pageInfo?.total || 0,
          });
        } else {
          this.setState({
            zqyctxNum: '--',
          });
        }
      },
    });
  }
  xqfn = (params) => {
    const { dispatch } = this.props;
    // 查询行权提醒
    dispatch({
      type: 'ExerciseRemindM/getTableData',
      payload: params,
      callback: (type, data) => {
        if (type == 'success') {
          if (data?.pageInfo) {
            this.setState({
              xqtxNum: data?.pageInfo?.total || 0,
            });
          } else {
            this.setState({
              xqtxNum: '--',
            });
          }
        }
      },
    });
  };
  clickUrl = (text) => {
    const { dispatch } = this.props;
    switch (text) {
      // case '信评提醒': dispatch(routerRedux.push(`/reviewRemind`)); break;
      case '行权提醒':
        let paramss = {
          startTime: moment().format('YYYY-MM-DD'),
          endTime: moment().add(3, 'month').format('YYYY-MM-DD'),
        };
        sessionStorage.setItem('workPlaceExercise', JSON.stringify(paramss));
        dispatch(routerRedux.push(`/OperatePlatform/ExerciseRemind`));
        break;
      case '可转债赎回提醒':
        let obj = {
          startTime: moment().format('YYYY-MM-DD'),
          endTime: moment().add(3, 'month').format('YYYYMMDD'),
        };
        sessionStorage.setItem('workPlaceConvertible', JSON.stringify(obj));
        dispatch(routerRedux.push(`/OperatePlatform/convertibleBondList`));
        break;
      case '债券异常提醒':
        let objs = {
          startTime: moment().format('YYYY-MM-DD'),
          endTime: moment().format('YYYY-MM-DD'),
        };
        sessionStorage.setItem('workPlaceAbnormal', JSON.stringify(objs));
        dispatch(routerRedux.push(`/OperatePlatform/BondAbnormal`));
        break;
      // case '投资公告': dispatch(routerRedux.push(`/investmentMsg`)); break;
    }
  };

  // 当个组件样式
  omeComponent = (text, num, url, loading) => {
    return (
      <div className='oneArea_main' onClick={() => this.clickUrl(text)} style={{ cursor: 'pointer' }}>
        <div className='main_2'>
          <div className='left_img'>
            <img src={xxtx} style={{ height: '100px', width: '4px' }} />
          </div>
          <div className='cardName' style={{ marginLeft: '20px' }}>
            <span>{text}</span>
          </div>
          <div className='cardNum' style={{ marginLeft: '20px' }}>
            {loading ? <Spin spinning={true} /> : <span>{num || 0}</span>}
          </div>
          <div className='cardImg'>
            <img src={url} style={{ height: '60px', width: '60px' }} />
          </div>
        </div>
      </div>
    );
  };
  handleUserMenu = (menus, tabControl) => {
    if (menus.length) {
      if (menus.some((item, index) => item.name == '其它')) {
        for (var i = 0; i < menus.length; i++) {
          if (menus[i].name == '其它') {
            return menus[i]?.menuModels.some((item, index) => item.name == tabControl);
          }
        }
      }
    }
  };
  // 循环渲染后主体组件
  showComponent = () => {
    const { zqyctxNum, xqtxNum, zzhtxNum } = this.state;
    const { isLoading } = this.props;
    const {
      user: { userMenuData },
      xqtxLoading,
      kzzLoading,
      zhsycLoading,
      XQLoad,
    } = this.props;
    return (
      <div className='oneArea'>
        {isLoading || XQLoad ? (
          <div style={{ position: 'absolute', left: '50%', top: '50%', marginLeft: '-10px', marginTop: '-12px' }}>
            <Spin></Spin>
          </div>
        ) : !this.handleUserMenu(userMenuData, '行权提醒') && !this.handleUserMenu(userMenuData, '可转债赎回提醒') && !this.handleUserMenu(userMenuData, '债券异常提醒') ? (
          <NoData title='暂无数据'></NoData>
        ) : (
          <>
            {this.handleUserMenu(userMenuData, '行权提醒') ? this.omeComponent('行权提醒', xqtxNum, xqtx, xqtxLoading) : null}
            {this.handleUserMenu(userMenuData, '可转债赎回提醒') ? this.omeComponent('可转债赎回提醒', zzhtxNum, kzztx, kzzLoading) : null}
            {this.handleUserMenu(userMenuData, '债券异常提醒') ? this.omeComponent('债券异常提醒', zqyctxNum, zqyc, zhsycLoading) : null}
          </>
        )}
      </div>
    );
  };

  render() {
    return (
      <div className={style.mainCompont}>
        <div className='main_title' style={{ backgroundImage: `url(${xxtxheader})` }}>
          <span>消息提醒</span>
        </div>
        <div className='main_body' style={{ height: 'calc(100% - 54px)' }}>
          {this.showComponent()}
        </div>
      </div>
    );
  }
}
